<template>
	<!-- 内容 -->
    <div class="wrapper">
        <!-- Breadcrumb Area Start Here -->
        <div class="breadcrumb-area">
            <div class="container">
                <ol class="breadcrumb breadcrumb-list">
                    <li class="breadcrumb-item">
                        <NuxtLink to="/">Home</NuxtLink>
                    </li>
                    <li class="breadcrumb-item active">About us</li>
                </ol>
            </div>
        </div>
        <!-- Breadcrumb Area End Here -->
        <!-- Our Contact Start Here -->
        <div class="our-team dark-white-bg ptb-80">
            <div class="container">
                <div class="about-title team-title">
                    <h3>Our contact information</h3>
                </div>
                <div class="dashboard-upper-info">
                       <div class="row align-items-center no-gutters">
                           <div class="col-xl-3 col-lg-3 col-md-6">
                               <div class="d-single-info">
                                   <p class="user-name">My name</p>
                                   <p>{{ siteDetail.companyName }}</p>
                               </div>
                           </div>
                           <div class="col-xl-3 col-lg-4 col-md-6">
                               <div class="d-single-info">
                                   <p>Need Support? Customer service.</p>
                                   <p>{{ siteDetail.email }}</p>
                               </div>
                           </div>
                           <div class="col-xl-3 col-lg-3 col-md-6">
                               <div class="d-single-info">
                                   <p>E-mail them at </p>
                                   <p>{{ siteDetail.email }}</p>
                               </div>
                           </div>
                           <div class="col-xl-3 col-lg-2 col-md-6">
                               <div class="d-single-info text-lg-center">
                                <span class="view-cart">Message</span>
                                   <!-- <a class="view-cart" href="cart.html">view cart</a> -->
                               </div>
                           </div>
                       </div>
                   </div>
            </div>
        </div>
        <!-- Our Contact End Here -->
        <!-- Regester Page Start Here -->
        <div class="register-area  ptb-80">
		    <div class="container">
            <h3 class="login-header">Contact us</h3>
		        <div class="row">
		            <div class="col-xl-12">
                        <div class="register-contact  clearfix">
                            <client-only>
                                <n-form ref="formRef" :model="submitFormValue" class="form-group" :rules="submitRules">
                                    <n-form-item-row label="Name" path="name" class="col-form-label">
                                        <n-input v-model:value="submitFormValue.name" class="col-sm-7" placeholder="Please enter your name" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Phone" path="phone" class="col-form-label">
                                        <n-input v-model:value="submitFormValue.phone" class="col-sm-7" placeholder="Please enter your phone" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Email" path="email" class="col-form-label">
                                        <n-input v-model:value="submitFormValue.email" class="col-sm-7" placeholder="Please enter your email" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Content" path="content" class="col-form-label">
                                        <n-input type="textarea" v-model:value="submitFormValue.content" class="col-sm-7" placeholder="Please enter your content" clearable/>
                                    </n-form-item-row>
                                </n-form>
                                 <div class="footer-content mail-content clearfix">
                                    <div class="send-email float-md-right">
                                        <n-button type="primary" class="return-customer-btn" :disabled="isSubmit" :loading="isSubmit" block secondary strong @click="handleValidateClick">
                                            Sending Mail
                                        </n-button>
                                    </div>
                                </div>
                            </client-only>
                        </div>
		            </div>
		        </div>
		    </div>
		</div>
        <!-- Register Page End Here -->
        <!-- Our Team Star Here -->
        <div class="our-team dark-white-bg ptb-80">
            <div class="container">
                <div class="about-title team-title">
                    <h3>Business partner</h3>
                </div>
                <swiper
                    :slides-per-view="5"
                    :space-between="50"
                >
                    <swiper-slide v-for="item in partnerList" :key="item.id">
                        <NuxtLink to="#"><img :src="item.logo" :alt="item.partnerName"></NuxtLink>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <!-- Our Team End Here -->
    </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

import {
  NConfigProvider,
  NTabs,
  NTabPane,
  NForm,
  NFormItemRow,
  NInput,
  NButton,
  useMessage
} from 'naive-ui'

import { IColumnDetail } from 'models/IColumn'
import IComment from 'models/IComment';
import Prism from 'prismjs'

const route = useRoute()
const id = route.params.id
const columnDetail = await useServerRequest<IColumnDetail>(`clientWeb/column/${id}`)
const siteDetail = await useServerRequest(`clientWeb/webInfo`)

useHead({
    title: columnDetail.title,
    meta: [
        { name: 'keywords', content: columnDetail.keyword },
        { name: 'description', content: columnDetail.description },
    ]
})

onMounted(async () => {
    await nextTick(() => {
        Prism.highlightAll()
        submitFormValue.value.messageUrl = window.location.href
        // console.log()
    })
})

// 合作伙伴列表
const result = await useServerRequest('clientWeb/partnerList')
const partnerList = result.list
    
    const submitFormValue = ref({
        name: '',
        phone: '',
        email: '',
        messageUrl: '',
        contentName: '来自联系我们的页面',
        contentId: '',
        content: ''
    })
    console.log(route, submitFormValue)
    const submitRules = {
        name: {
            required: true,
            message: 'Please enter your name',
            trigger: ['input', 'blur']
        },
        phone: {
          required: true,
          message: 'Please enter your phone',
          trigger: ['input', 'blur']
        },
        email: {
          required: true,
          message: 'Please enter your phone',
          trigger: ['input', 'blur']
        }
      }

    const formRef = ref();
    const isSubmit = ref(false)
    const message = useMessage();

    const handleValidateClick = (e: MouseEvent) => {
        e.preventDefault()
        formRef.value?.validate(async (errors) => {
          if (!errors) {
            isSubmit.value = true;
            const { code, data, error, msg } = await $https({
                method: "POST",
                url: 'clientWeb/submitMessage',
                body: submitFormValue.value
            })
            console.log(data, message)
            if (code === 200) {
                isSubmit.value = false;
                message.success("Send Successfully !"); 
                location.reload();
            } else {
                isSubmit.value = false;
                let text = error ? error[0] : msg
                message.error(`${text}`);
            }

          } else {
            console.log(errors)
          }
        })
    }
</script>

<style scoped></style>